<template>
  <div class="main">
    <el-tabs type="border-card" style="box-shadow: 2px 2px 5px 5px #EBEDF0;">
      <el-tab-pane label="缴费信息详情" >
        <el-form
          :model="detaildata"
          :inline="true"
          label-width="150px"
          class="demo-ruleForm"
          style="padding-bottom: 200px;"
        >
          <el-form-item label="缴费产品" >
            <el-input v-model="detaildata.payname" readonly minlength="500"></el-input>
          </el-form-item>
          <el-form-item label="缴费人员" >
            <el-input v-model="detaildata.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="缴费金额" >
            <el-input v-model="detaildata.paymoney" readonly></el-input>
          </el-form-item>
          <el-form-item label="缴费优先级" >
            <el-input v-model="detaildata.paylevel" readonly></el-input>
          </el-form-item>
          <el-form-item label="支付时间">
            <el-input v-model="detaildata.costtime" readonly></el-input>
          </el-form-item>
          <el-form-item label="支付状态" >
            <el-input v-model="detaildata.coststatus" readonly></el-input>
          </el-form-item>
          <el-form-item label="支付类型" style="width: 100%;">
            <template>
                <img style="margin-left: 15px;" src="http://property.byesame.com/img/zfb1.4e5cf19b.png" height="100" alt="">
                <img style="margin-left: 40px;" src="http://property.byesame.com/img/wx1.f21631b0.png" height="100" alt="">
                <img style="margin-left: 40px;" src="http://property.byesame.com/img/ysf.a4d32ab5.png" height="100" alt="">
            </template>
          </el-form-item>
          <el-form-item label="回复内容:"  >
            {{ this.detaildata.costcontent }}
          </el-form-item>
            
          
        </el-form>

        <div
          class="button-box"
          style="
            z-index: 10;
            height: 150px;
            position: fixed;
            top: 160px;
            right: 15px;
          "
        >
          <el-button
            type="primary"
            size="medium"
            class="button1"
            @click="tobefore"
          >
            <span class="span1">
              <svg
                t="1722249586420"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2302"
                height="20"
              >
                <path
                  d="M947.4 864C893.2 697.7 736.2 578.9 551 575.5c-23.1-0.4-44.9 0.1-65.6 1.5v164.3c0.1 0.5 0.2 1 0.2 1.5 0 4-3.3 7.3-7.3 7.3-2.7 0-5-1.4-6.2-3.5v0.7L68.8 465.4h2.1c-4 0-7.3-3.3-7.3-7.3 0-2.9 1.7-5.4 4.1-6.6L472 169v0.7c1.3-2.1 3.6-3.5 6.2-3.5 4 0 7.3 3.3 7.3 7.3 0 0.5-0.1 1-0.2 1.5v159.4c18.5-0.9 37.9-1.2 58.3-0.8 230.1 3.9 416.7 196.9 416.7 427.1 0.1 35.5-4.5 70.2-12.9 103.3z m-462-704.4v0.2h-0.4l0.4-0.2z m0 596.9l-0.3-0.2h0.3v0.2z"
                  fill="#ffffff"
                  p-id="2303"
                ></path>
              </svg>
              <span>返回</span>
            </span>
          </el-button>
         
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      msg: "",
      flag: this.$route.query.flag,
      content: "",
      detaildata:{},
      detailpage: {
        id: this.$route.query.id,
        token: sessionStorage.getItem("token"),
      },
    };
  },
  created() {
    this.detailmessage();
  },
  methods: {
    //返回
    tobefore() {
      this.$router.push("/pay/paymessage");
    },

    //详细页得到数据
    detailmessage() {

        this.$axios
          .get("http://community.byesame.com/cost/getCostDetail", {
            params: this.detailpage,
          })
          .then((res) => {
            this.detaildata = res.data[0]
            if(this.detaildata.coststatus == 2){
                this.detaildata.coststatus = "未支付"
            }else{
                this.detaildata.coststatus = "已支付"
            }
          });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.main {
  position: relative;
}

.span1 {
  display: flex;
  align-items: center;
}
.button-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100px;
  justify-content: space-between;
  position: absolute;
  right: 0px;
  top: 80px;
}
.el-button + .el-button {
  margin: 0;
}
.el-form--inline .el-form-item {
  width: 50%;
  box-sizing: border-box;
  margin: 0;
  margin-bottom: 20px;
}
.demo-ruleForm {
  display: flex;
  flex-wrap: wrap;
}
.el-input {
  width: 500px;
}
.el-form-item {
  width: 500px;
}

.editor {
  height: 500px;
  width: 100%;
}
.el-form-item {
  width: 92%;
}
.list {
  display: flex;
  line-height: 50px;
  width: 100%;
}
.list-title {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}
.list-content {
  flex: 8;
}
</style>